<html>
<head>
<title>uRobot Information on Page</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta http-equiv="pragma" content="no-cache"/>
<meta http-equiv="expires" content="1970-01-01"/>
<script type="text/javascript">
function createXMLHttpRequest() {
  if (window.ActiveXObject) {
    xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
  }
  else if (window.XMLHttpRequest) {
    xmlHttp = new XMLHttpRequest();
  }
}
function e(el) {
  d = document;
  if(d.getElementById) {
    return d.getElementById(el);
  } else if (d.all) {
    return d.all[el];
  }
}
function motion(action) {
  createXMLHttpRequest();
  var url = "/web/urobot.cgi?action="+action;
  xmlHttp.open("GET", url, true);
  xmlHttp.onreadystatechange = motionCallback;
  xmlHttp.send(null);
}
function motionCallback() {
  if (xmlHttp.readyState == 4) {
    if (xmlHttp.status == 200) {
      var result = xmlHttp.responseXML.getElementsByTagName("result")[0].firstChild.data;
      e('motion').innerHTML = result;
    }
  }
}
function motion_f() {
  motion('GoForward');
}
function motion_b() {
  motion('BackForward');
}
function motion_s() {
  motion('Stop');
}
function motion_l() {
  motion('TurnLeft');
}
function motion_r() {
  motion('TurnRight');
}
function sensor(action) {
  createXMLHttpRequest();
  var url = "/web/urobot.cgi?action="+action;
  xmlHttp.open("GET", url, true);
  xmlHttp.onreadystatechange = sensorCallback;
  xmlHttp.send(null);
}
function sensorCallback() {
  if (xmlHttp.readyState == 4) {
    if (xmlHttp.status == 200) {
      var result = xmlHttp.responseXML.getElementsByTagName("result")[0].firstChild.data;
      e('sensor').innerHTML = result;
    }
  }
}
function sensor_fr() {
  sensor('FrontLight');
}
function sensor_fg() {
  sensor('FogLight');
}
function sensor_br() {
  sensor('BreakLight');
}
function sensor_wk() {
  sensor('WinkerLight');
}
function poll() {
  createXMLHttpRequest();
  var url = "/web/urobot.cgi?action=GetDistances";
  xmlHttp.open("GET", url, true);
  xmlHttp.onreadystatechange = pollCallback;
  xmlHttp.send(null);
}
function pollCallback() {
  if (xmlHttp.readyState == 4) {
    if (xmlHttp.status == 200) {
      var result1 = xmlHttp.responseXML.getElementsByTagName("result")[0].firstChild.data;
      var result2 = xmlHttp.responseXML.getElementsByTagName("result")[1].firstChild.data;
      var result3 = xmlHttp.responseXML.getElementsByTagName("result")[2].firstChild.data;
      var result4 = xmlHttp.responseXML.getElementsByTagName("result")[3].firstChild.data;
      fd(parseInt(result1));
      bd(parseInt(result2));
      ld(parseInt(result3));
      rd(parseInt(result4));
      setTimeout("poll()", 1000);
    }
  }
}
function s(el,n,max,text) {
  e(el).innerHTML = '<table width=504 border=0 cellpadding=1 cellspacing=0>'+
                    '<tr><td width=200>' +
                    text + '</td>' +
                    '<td width=' + (200*n/max) + ' bgcolor="gray">&nbsp;</td>' +
                    '<td width=' + (200-200*n/max) + ' bgcolor="lightgray">&nbsp;</td>' +
                    '</table>';
}
function dc(n,d) {
  return n.toFixed(d);
}
function fd(m) {
  n = dc(m, 1);
  s('front',n,100,'Front Distance '+n+' meter');
}
function bd(m) {
  n = dc(m, 1);
  s('back',n,100,'Rear Distance '+n+' meter');
}
function ld(m) {
  n = dc(m, 1);
  s('left',n,100,'Left Distance '+n+' meter');
}
function rd(m) {
  n = dc(m, 1);
  s('right',n,100,'Right Distance '+n+' meter');
}
function i(n) {
  e('i').innerHTML = n;
}
var imageNr = 0;
var finished = new Array();
var paused = false;
function createImageLayer() {
  var img = new Image();
  img.style.position = "absolute";
  img.style.zIndex = -1;
  img.onload = imageOnload;
  img.onclick = imageOnclick;
  img.src = "http://xxx.yyy.zzz.kkk:8080/?action=snapshot&n=" + (++imageNr);
  var webcam = e('webcam');
  webcam.insertBefore(img, webcam.firstChild);
}
function imageOnload() {
  this.style.zIndex = imageNr;
  while (1 < finished.length) {
    var del = finished.shift();
    del.parentNode.removeChild(del);
  }
  finished.push(this);
  if (!paused) createImageLayer();
}
function imageOnclick() {
  paused = !paused;
  if (!paused) createImageLayer();
}
</script>
</head>
<body onload="createImageLayer();">
<h1 align="center">
<tt>uRobot UPnP Robot Server</tt><br/>
</h1>
<br/>
<center>
<tr width="500">
<b>Version : </b> 1.2<br/>
</tr>
<b>Device UDN :</b> abcdefgh <br/>
</center><br/>
<b>Motion Control</b><br/>
<input type="button" value="GoForward" id="GoForward" onclick="motion_f();"/>
<input type="button" value="GoBackward" id="GoBackward" onclick="motion_b();"/>
<input type="button" value="Stop" id="Stop" onclick="motion_s();"/>
<input type="button" value="TurnLeft" id="TurnLeft" onclick="motion_l();"/>
<input type="button" value="TurnRight" id="TurnRight" onclick="motion_r();"/>
<br/>
<div id="motion"></div>
<!--form method="get" action="/web/urobot.cgi"-->
<!--input type="submit" name="action" value="GoForward"/-->
<!--input type="submit" name="action" value="GoBackward"/-->
<!--input type="submit" name="action" value="Stop"/-->
<!--input type="submit" name="action" value="TurnLeft"/-->
<!--input type="submit" name="action" value="TurnRight"/-->
<!--/form-->
<br/>
<b>Sensor Control</b><br/>
<input type="button" value="FrontLight" id="FrontLight" onclick="sensor_fr();"/>
<input type="button" value="FogLight" id="FogLight" onclick="sensor_fg();"/>
<input type="button" value="BreakLight" id="BreakLight" onclick="sensor_br();"/>
<input type="button" value="WinkerLight" id="WinkerLight" onclick="sensor_wk();"/>
<br/>
<div id="sensor"></div>
<!--form method="get" action="/web/urobot.cgi"!-->
<!--input type="submit" name="action" value="FrontLight"/-->
<!--input type="submit" name="action" value="FogLight"/-->
<!--input type="submit" name="action" value="BreakLight"/-->
<!--input type="submit" name="action" value="WinkerLight"/!-->
<!--/form-->
<br/>
<b>Sensor Monitoring</b><br/>
<input type="button" value="Start" id="start" onclick="poll();"/><br/>
<div id="front"></div>
<div id="back"></div>
<div id="left"></div>
<div id="right"></div>
<!--script type="text/javascript">fd(10);</script-->
<!--script type="text/javascript">bd(30);</script-->
<!--script type="text/javascript">ld(50);</script-->
<!--script type="text/javascript">rd(70);</script-->
<br/>
<b>Camera Monitoring</b><br/>
<div id="webcam"><noscript><img src="http://192.168.0.20:8080/?action=snapshot" width="320" height="240" /></noscript></div>
<br/>
<form method="get" action="/web/urobot.cgi">
<input type="hidden" name="action" value="Refresh"/>
<input type="submit" value="Refersh"/>
</form>
</body>
</html>
